<template>
  <div id='home'>
    <div class="navigator-wrapper">
      <div class="navigator">
        <div class="nav-wrapper shadow">
            <div class="avatar-wrapper" >
                <div class="avatar border-right-1px">
                    <Icon name="user"></Icon>
                </div>
            </div>
            <vNav></vNav>
            <div class="avatar-wrapper" style="visibility:hidden">
                <div class="avatar border-right-1px">
                    <icon name="ellipsis-h"></icon>
                </div>
            </div>
        </div>
      </div>
    </div>  
    <div class="taxi-wrapper">
        <div class="taxi-content">
            <div class="location">
                <div class="location-item">
                    <p class="location-field" @click="bindStart">{{ position.address }}</p>
                </div>
                 <div class="location-item">
                    <p class="location-field">123</p>
                </div>
            </div>
        </div>
        <div class="taxi-send-btn">
            <button type="button" class="send-btn" @click="bindPublish">发布行程</button>
        </div>
    </div>
  </div>
</template>

<script>
import vNav from "@/components/Nav"
import Icon from 'vue-awesome/components/Icon'
import {mapGetters,mapActions,mapState} from 'vuex'
export default {
  data() {
    return {};
  },
  components: {
    vNav,
    Icon,
  },
  mounted() {
    this.$store.dispatch('getCurrentPosition', 'AMap')
  },
  computed: {
    ...mapState([
      'position',
      'isLogin'
    ])
  },
  methods: {
    bindPublish(){
      var type = this.$store.state.isLogin;
      if(type){
        this.$router.push({path:'trip'});
      }else{
        this.$router.push({path:'login'});
      }
    },
    bindStart(){
      this.$router.push({path:'search'});
    }
  }
};
</script>

<style>
.navigator-wrapper {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
}

.navigator .nav-wrapper.shadow {
  box-shadow: 0 2px 3px rgba(0, 0, 0, .12);
}

.navigator .nav-wrapper {
  position: relative;
  z-index: 50;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 54px;
  background: #fff;
}

.navigator .nav-wrapper .avatar-wrapper {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 44px;
  flex: 0 0 44px;
  width: 44px;
  padding-top: 19px;
  z-index: 50;
}

.navigator .nav-wrapper .avatar-wrapper .avatar {
  line-height: 14px;
  padding: 0 12px 0 16px;
}

.border-bottom-1px,
.border-left-1px,
.border-right-1px,
.border-top-1px {
  position: relative;
}

.navigator .nav-wrapper .avatar-wrapper .avatar .mfic-person {
  line-height: 1;
  font-size: 18px;
  color: #666;
}

.border-right-1px:after {
  border-right: 1px solid #f5f5f5;
  top: 0;
  right: 0;
  height: 100%;
  transform-origin: right 0;
}

.avatar .icon {
  color: #000;
  font-size: 18px;
}


.navigator .nav-wrapper .more-wrapper {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 38px;
  flex: 0 0 38px;
  width: 38px;
}

.navigator .nav-wrapper .more-wrapper .more {
  padding: 19px 16px 19px 6px;
}
.navigator .nav-wrapper .more-wrapper .more .icon{
  font-size: 18px;
  font-weight: bold;
}


.navigator .list-mask {
    position: fixed;
    left: 0;
    top: 55px;
    bottom: 0;
    z-index: 30;
    width: 100%;
    background-color: rgba(37,38,45,.4);
}
.navigator .nav-wrapper .avatar-wrapper {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 44px;
  flex: 0 0 44px;
  width: 44px;
  padding-top: 19px;
  z-index: 50;
}

.navigator .nav-wrapper .avatar-wrapper .avatar {
  line-height: 14px;
  padding: 0 12px 0 16px;
}
/*public*/
li {
    list-style: none;
}
.border-bottom-1px:after,
.border-bottom-1px:before,
.border-left-1px:after,
.border-left-1px:before,
.border-right-1px:after,
.border-right-1px:before,
.border-top-1px:after,
.border-top-1px:before {
  content: "";
  display: block;
  position: absolute;
  transform-origin: 0 0;
}
.taxi-wrapper{
    position: absolute;
    padding: 10px;
    width: 100%;
    top: 54px;
    bottom: 0;
    box-sizing: border-box;
    overflow: auto;
    font-size: 12px;
}
.taxi-wrapper .taxi-content{
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    color: #999;
    background-color: #fff;
    text-align: left;
}
.taxi-wrapper .taxi-content .location{
    font-size: 16px;
    line-height: 1;
    color: #fc9153;
    background-color: #fff;
}
.taxi-wrapper .taxi-content .location .location-item{
        position: relative;
    padding-left: 38px;
    padding-right: 16px;
}
.taxi-wrapper .taxi-content .location .location-item::before{
        content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background-color: #3cbca3;
}
.taxi-wrapper .taxi-content .location .location-item .location-field{
        padding: 17px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;    
}
.taxi-send-btn{
        margin-top: 10px;
    position: relative;
}
.send-btn{
        display: block;
    margin: 0;
    padding: 17px 16px;
    width: 100%;
    line-height: 16px;
    border-radius: 2px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    background-image: none;
    white-space: nowrap;
    outline: none;
    font-size: 16px;
    color: #fff;
    border: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
        background: rgb(74, 76, 91);
}
</style>
